<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>YuStorage 使用示例</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
        }
        .section {
            margin: 20px 0;
            padding: 15px;
            border: 1px solid #ddd;
            border-radius: 5px;
        }
        button {
            margin: 5px;
            padding: 8px 16px;
            background: #007bff;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        button:hover {
            background: #0056b3;
        }
        input {
            margin: 5px;
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
        .result {
            margin: 10px 0;
            padding: 10px;
            background: #f8f9fa;
            border-radius: 4px;
        }
    </style>
</head>
<body>
    <h1>YuStorage 使用示例</h1>
    
    <div class="section">
        <h2>localStorage 示例</h2>
        <input type="text" id="localKey" placeholder="键名" value="user">
        <input type="text" id="localValue" placeholder="值" value="张三">
        <button onclick="setLocal()">设置</button>
        <button onclick="getLocal()">获取</button>
        <button onclick="removeLocal()">删除</button>
        <button onclick="clearLocal()">清空</button>
        <div id="localResult" class="result"></div>
    </div>

    <div class="section">
        <h2>sessionStorage 示例</h2>
        <input type="text" id="sessionKey" placeholder="键名" value="session">
        <input type="text" id="sessionValue" placeholder="值" value="会话数据">
        <button onclick="setSession()">设置</button>
        <button onclick="getSession()">获取</button>
        <button onclick="removeSession()">删除</button>
        <button onclick="clearSession()">清空</button>
        <div id="sessionResult" class="result"></div>
    </div>

    <div class="section">
        <h2>Cookie 示例</h2>
        <input type="text" id="cookieKey" placeholder="键名" value="theme">
        <input type="text" id="cookieValue" placeholder="值" value="dark">
        <button onclick="setCookie()">设置</button>
        <button onclick="getCookie()">获取</button>
        <button onclick="removeCookie()">删除</button>
        <button onclick="clearCookies()">清空</button>
        <div id="cookieResult" class="result"></div>
    </div>

    <div class="section">
        <h2>IndexedDB 示例</h2>
        <input type="text" id="dbKey" placeholder="键名" value="settings">
        <input type="text" id="dbValue" placeholder="值" value='{"lang":"zh","theme":"dark"}'>
        <button onclick="setDB()">设置</button>
        <button onclick="getDB()">获取</button>
        <button onclick="removeDB()">删除</button>
        <button onclick="clearDB()">清空</button>
        <div id="dbResult" class="result"></div>
    </div>

    <div class="section">
        <h2>存储信息</h2>
        <button onclick="showStorageInfo()">显示存储信息</button>
        <div id="storageInfo" class="result"></div>
    </div>

    <!-- 引入 UMD 版本的 yu-storage -->
    <script src="./dist/yu-storage.umd.js?v=7"></script>
    
    <script>
        // 获取 yuStorage 实例
        const yuStorage = YuStorage.default;

        // localStorage 操作
        function setLocal() {
            const key = document.getElementById('localKey').value;
            const value = document.getElementById('localValue').value;
            const result = yuStorage.set(key, value, { type: 'local' });
            document.getElementById('localResult').innerHTML = `设置结果: ${result}`;
        }

        function getLocal() {
            const key = document.getElementById('localKey').value;
            const value = yuStorage.get(key, { type: 'local' });
            document.getElementById('localResult').innerHTML = `获取结果: ${JSON.stringify(value)}`;
        }

        function removeLocal() {
            const key = document.getElementById('localKey').value;
            const result = yuStorage.remove(key, { type: 'local' });
            document.getElementById('localResult').innerHTML = `删除结果: ${result}`;
        }

        function clearLocal() {
            const result = yuStorage.clear({ type: 'local' });
            document.getElementById('localResult').innerHTML = `清空结果: ${result}`;
        }

        // sessionStorage 操作
        function setSession() {
            const key = document.getElementById('sessionKey').value;
            const value = document.getElementById('sessionValue').value;
            const result = yuStorage.set(key, value, { type: 'session' });
            document.getElementById('sessionResult').innerHTML = `设置结果: ${result}`;
        }

        function getSession() {
            const key = document.getElementById('sessionKey').value;
            const value = yuStorage.get(key, { type: 'session' });
            document.getElementById('sessionResult').innerHTML = `获取结果: ${JSON.stringify(value)}`;
        }

        function removeSession() {
            const key = document.getElementById('sessionKey').value;
            const result = yuStorage.remove(key, { type: 'session' });
            document.getElementById('sessionResult').innerHTML = `删除结果: ${result}`;
        }

        function clearSession() {
            const result = yuStorage.clear({ type: 'session' });
            document.getElementById('sessionResult').innerHTML = `清空结果: ${result}`;
        }

        // Cookie 操作
        function setCookie() {
            const key = document.getElementById('cookieKey').value;
            const value = document.getElementById('cookieValue').value;
            const result = yuStorage.set(key, value, { type: 'cookie', expires: 7 });
            document.getElementById('cookieResult').innerHTML = `设置结果: ${result}`;
        }

        function getCookie() {
            const key = document.getElementById('cookieKey').value;
            const value = yuStorage.get(key, { type: 'cookie' });
            document.getElementById('cookieResult').innerHTML = `获取结果: ${JSON.stringify(value)}`;
        }

        function removeCookie() {
            const key = document.getElementById('cookieKey').value;
            const result = yuStorage.remove(key, { type: 'cookie' });
            document.getElementById('cookieResult').innerHTML = `删除结果: ${result}`;
        }

        function clearCookies() {
            const result = yuStorage.clear({ type: 'cookie' });
            document.getElementById('cookieResult').innerHTML = `清空结果: ${result}`;
        }

        // IndexedDB 操作
        async function setDB() {
            const key = document.getElementById('dbKey').value;
            const value = document.getElementById('dbValue').value;
            try {
                const result = await yuStorage.set(key, value, { type: 'indexeddb' });
                document.getElementById('dbResult').innerHTML = `设置结果: ${result}`;
            } catch (error) {
                document.getElementById('dbResult').innerHTML = `设置失败: ${error.message}`;
            }
        }

        async function getDB() {
            const key = document.getElementById('dbKey').value;
            try {
                const value = await yuStorage.get(key, { type: 'indexeddb' });
                document.getElementById('dbResult').innerHTML = `获取结果: ${JSON.stringify(value)}`;
            } catch (error) {
                document.getElementById('dbResult').innerHTML = `获取失败: ${error.message}`;
            }
        }

        async function removeDB() {
            const key = document.getElementById('dbKey').value;
            try {
                const result = await yuStorage.remove(key, { type: 'indexeddb' });
                document.getElementById('dbResult').innerHTML = `删除结果: ${result}`;
            } catch (error) {
                document.getElementById('dbResult').innerHTML = `删除失败: ${error.message}`;
            }
        }

        async function clearDB() {
            try {
                const result = await yuStorage.clear({ type: 'indexeddb' });
                document.getElementById('dbResult').innerHTML = `清空结果: ${result}`;
            } catch (error) {
                document.getElementById('dbResult').innerHTML = `清空失败: ${error.message}`;
            }
        }

        // 显示存储信息
        async function showStorageInfo() {
            const info = {
                availableTypes: yuStorage.getAvailableTypes(),
                localStorage: await getStorageData('local'),
                sessionStorage: await getStorageData('session'),
                cookie: await getStorageData('cookie'),
                indexeddb: await getStorageData('indexeddb')
            };
            document.getElementById('storageInfo').innerHTML = `<pre>${JSON.stringify(info, null, 2)}</pre>`;
        }

        // 获取存储数据（包含键值对）
        async function getStorageData(type) {
            const storageInfo = yuStorage.getStorageInfo(type);
            const data = await Promise.resolve(storageInfo);
            
            if (!data.available) {
                return data;
            }

            // 过滤掉非测试相关的键
            const testKeys = data.keys.filter(key => 
                key.startsWith('test-') || 
                key === 'user' || 
                key === 'session' || 
                key === 'theme' || 
                key === 'settings'
            );

            // 获取过滤后的键值对
            const keyValuePairs = {};
            for (const key of testKeys) {
                try {
                    const value = await yuStorage.get(key, { type: type });
                    keyValuePairs[key] = value;
                } catch (error) {
                    keyValuePairs[key] = `Error: ${error.message}`;
                }
            }

            return {
                type: data.type,
                available: data.available,
                keys: testKeys,
                data: keyValuePairs,
                totalKeys: data.keys.length
            };
        }
    </script>
</body>
</html>